<template>
  <component
    :is="tag"
    :type="tag === 'button' ? nativeType : ''"
    :disabled="disabled || loading"
    @click="handleClick"
    class="btn"
    :class="[
      { 'btn-round': round },
      { 'btn-block': block },
      { 'btn-icon btn-fab': icon },
      { [`btn-${type}`]: type },
      { [`btn-${size}`]: size },
      { 'btn-simple': simple },
      { 'btn-link': link },
      { disabled: disabled && tag !== 'button' },
    ]"
  >
    <slot name="loading">
      <i v-if="loading" class="fas fa-spinner fa-spin"></i>
    </slot>

    <slot></slot>
  </component>
</template>

<script>
export default {
  name: "base-button",
  props: {
    tag: {
      type: String,
      default: "button",
    },
    round: Boolean,
    icon: Boolean,
    block: Boolean,
    disabled: Boolean,
    loading: Boolean,
    type: {
      type: String,
      default: "default",
    },
    nativeType: {
      type: String,
      default: "button",
    },
    size: {
      type: String,
      default: "",
    },
    simple: {
      type: Boolean,
    },
    link: {
      type: Boolean,
    },
  },
  methods: {
    handleClick(evt) {
      this.$emit("click", evt);
    },
  },
};
</script>

<style scoped>
.btn {
  font-size: 18px; /* 增大字体 */
  font-weight: bold; /* 加粗 */
  font-family: "Poppins", Arial, sans-serif; /* 使用更美观的字体 */
  padding: 12px 20px; /* 调整内边距，优化按钮大小 */
  border-radius: 6px; /* 圆角优化 */
}

.btn-icon {
  font-size: 20px; /* 图标按钮稍大 */
}

.btn.btn-sm {
  font-size: 16px; /* 小按钮字体适中 */
}

.btn.btn-lg {
  font-size: 20px; /* 大按钮字体更明显 */
}
</style>

